<template>
  <div class="content-more" :style="customHeader">
    <div class="content-more-body">
      <div class="content-header" :style="titleStyle">
        <div class="header-content">
          <div class="content-header-title">
            <div
              class="header-breadcrumb active"
              :style="titleFont"
              @click="callBack"
            >
              {{ menuName }}
            </div>
            <div class="header-icon" :style="activeFont">
              <i class="el-icon-arrow-right" />
            </div>
            <div class="header-breadcrumb" :style="activeFont">
              {{ columnName }}
            </div>
          </div>
          <div class="header-back" :style="titleFont" @click="callBack">
            返回&nbsp;&nbsp;&nbsp;&nbsp;<i
              class="el-icon-right"
              style="font-size: 16px"
            />
          </div>
        </div>
      </div>
      <div class="content-component">
        <component
          :is="templateName"
          v-if="templateName"
          :layout="layoutStyle"
          :show-header="true"
          :temp="temp"
          @fetch-entity="entityTempCallBack"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PortalNew4More',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      column: {},
      mb: null,
      dl: null,
      fl: null,
      templateName: null,
      menuName: '',
      menuId: null,
      columnName: '',
      temp: {},
      layoutStyle: {},
      customHeader: {},
      titleStyle: {},
      titleFont: {},
      activeFont: {}
    };
  },
  watch: {
    layout: {
      handler(newName, old) {
        this.layoutStyle = newName;
        this.customHeader = {
          color: newName.fontColor,
          backgroundColor: newName.mrzt,
          opacity: newName.tmd
        };
        this.titleStyle = {
          backgroundColor: newName.mrlb,
          opacity: newName.tmd
        };
        this.titleFont = { color: newName.lmys };
        this.activeFont = { color: newName.xsys };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    column: {
      handler(newName, oldName) {
        // 值发生变化时
        if (undefined !== newName && newName !== null) {
          if (newName.showHeader === true) {
            this.mb = newName.mb;
            this.dl = newName.mbdl;
            this.fl = newName.mbfl;
            this.temp = newName;
            this.menuName = newName.menuName;
            this.menuId = newName.menuId;
            this.columnName = newName.columnName;
            const path = '/' + this.dl + '/' + this.fl + '/more/' + this.mb;
            const res = () => import(`@/template${path}`);
            this.templateName = res;
          } else {
            this.mb = newName.data.mb;
            this.dl = newName.data.mbdl;
            this.fl = newName.data.mbfl;
            this.menuName = newName.column.menu.name;
            this.menuId = newName.column.menu.id;
            this.columnName = newName.lmmc;
            this.temp = newName.data;
            const path = '/' + this.dl + '/' + this.fl + '/more/' + this.mb;
            const res = () => import(`@/template${path}`);
            this.templateName = res;
          }
        } else {
          this.templateName = null;
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    init(data, lay) {
      this.column = data;
      this.layoutStyle = lay;
      this.customHeader = {
        color: this.layoutStyle.fontColor,
        backgroundColor: this.layoutStyle.mrzt,
        opacity: this.layoutStyle.tmd
      };
      this.titleStyle = {
        backgroundColor: this.layoutStyle.mrlb,
        opacity: this.layoutStyle.tmd
      };
      this.titleFont = { color: this.layoutStyle.lmys };
      this.activeFont = { color: this.layoutStyle.xsys };
    },
    callBack() {
      this.$emit('callBack', this.menuId, this.layout);
    },
    entityTempCallBack(data) {
      const column = data.setting;
      data.setting = this.column;
      data.column = column;
      this.$emit('parent-entity', data);
    }
  }
};
</script>

<style scoped>
.content-more {
  width: 100%;
  height: 100%;
  padding: 10px 8%;
  box-sizing: border-box;
  position: relative;
  overflow-y: auto;
}
.content-more-body {
  width: 100%;
  height: initial;
  display: flex;
  flex-flow: column nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background-color: #ffffff;
}
.content-header {
  flex: 0 1 auto;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 0px 15px;
  overflow: hidden;
}
.header-content {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 41px;
  border-bottom: 1px solid #f2f6fc;
}
.content-component {
  flex: 1 1 auto;
  width: 100%;
  height: initial;
}
.content-header-title {
  flex: 1 1 auto;
  height: 40px;
  line-height: 40px;
  display: flex;
  flex-flow: row nowrap;
}
.header-breadcrumb {
  flex: 0 1 auto;
  padding: 0px 5px;
  box-sizing: border-box;
  text-align: center;
  color: #909399;
  cursor: pointer;
}
.header-icon {
  width: 20px;
  text-align: center;
  color: #909399;
}
.active {
  font-weight: bolder;
  color: #222222;
}
.header-back {
  flex: 0 1 auto;
  width: 60px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
}
.header-back:hover,
.active:hover {
  color: #4a98f6;
}
.header-back::before {
  content: " ";
  width: 2px;
  height: 16px;
  top: 12px;
  left: 35px;
  position: absolute;
  background-color: #c0c4cc;
}
</style>
